{% extends "base_stu.html" %}
{% block content %}
    <div class="row">
        <div class="col-sm-12">
            <div class="profile-full-name">
                <span class="text-semibold">{{ person.Name }}</span>的主页
            </div>
            <div class="profile-row">
                <div class="left-col">
                    <div class="profile-block">
                        <div class="panel profile-photo">
                            <img src="/static/picture/{% if request.session.gender == '男' %}1.jpg{% else %}2.jpg{% endif %}" id="icon"
                                 class="info img-responsive img-thumbnail">
                        </div>
                        <br>
                        <a data-target="#myModal" data-toggle="modal" class="btn btn-success"><i
                                class="fa fa-check"></i>&nbsp;&nbsp;修改信息</a>&nbsp;&nbsp;

                    </div>


                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        修改信息
                                    </h4>
                                </div>
                                <form id="info" enctype="multipart/form-data" onsubmit="return false">
                                    {% csrf_token %}
                                    <div class="panel-body">
                                        <div class="row form-group">
                                            <label class="col-sm-3 control-label"
                                                   style="font-size:19px;font-weight:normal;padding-left: 50px;padding-top: 8px;">用户名:</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="name" id="name" class="form-control input-lg"
                                                       placeholder="用户名" value="{{ person.Name }}">
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <label class="col-sm-3 control-label"
                                                   style="font-size:19px;font-weight:normal;padding-left: 50px;padding-top: 8px;">性别:</label>
                                            <div class="col-sm-8">
                                                <div style="margin-top: 8px;">
                                                    <label class="px-single"><input type="radio" name="sex" value="男"
                                                                                    class="px"><span class="lbl"></span></label>
                                                    &nbsp;&nbsp;<span class="lbl">男</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <label class="px-single"><input type="radio" name="sex" value="女"
                                                                                    class="px"><span class="lbl"></span></label>
                                                    &nbsp;&nbsp;<span class="lbl">女</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
                                                </div>
                                            </div>
                                            <script>
                                                var s = document.getElementsByName('sex');
                                                value = "{{ person.Gender }}";
                                                for (var i = 0; i < s.length; i++) {
                                                    if (s[i].value == value) {
                                                        s[i].checked = true;
                                                    }
                                                }
                                            </script>

                                        </div>
                                        <div class="row form-group">
                                            <label class="col-sm-3 control-label"
                                                   style="font-size:19px;font-weight:normal;padding-left: 50px;padding-top: 8px;">个性签名:</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="motto" id="motto" class="form-control input-lg"
                                                       placeholder="个性签名" value="{{ person.Motto }}">
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <label class="col-sm-3 control-label"
                                                   style="font-size:19px; font-weight:normal;padding-left: 50px;padding-top: 8px;">
                                                年龄:
                                            </label>
                                            <div class="col-sm-8">
                                                <input type="text" name="age" id="age" class="form-control input-lg"
                                                       placeholder="{{ person.Age }}" value="">
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <label class="col-sm-3 control-label"
                                                   style="font-size:19px;font-weight:normal;padding-left: 50px;padding-top: 8px;">电子邮箱:</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="email" id="email"
                                                       onblur="limit_email(this,'邮箱')" class="form-control input-lg"
                                                       placeholder="邮箱" value="{{ person.Email }}">
                                            </div>
                                        </div>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                        </button>
                                        <button type="submit" class="btn btn-primary" id="sub">
                                            提交更改
                                        </button>
                                    </div>
                                </form>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                    <script>
                        $('#sub').click(function () {
                            var Data = $("#info").serialize();
                            $.ajax({
                                url: '/service/modify/',
                                type: 'POST',
                                data: Data,
                                success: function (response) {
                                    if (response['status'] == 200) {
                                        alert("修改成功");
                                        location.href = '/service/myhome/'
                                    } else {
                                        alert("修改失败");
                                    }
                                }
                            })
                        })
                    </script>
                    <script>
                        function limit_email(ob, message = null) {
                            var value = ob.value;
                            if (value.length === 0) return false; //避免对空输入框的正则检测
                            value = value.replace(/^\s*|\s*$/g, '');
                            var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g
                            var tag = reg.test(value);
                            if (!tag) {
                                alert("请检查" + message + "输入格式！请输入正确格式的E-mail链接");
                                return false;
                            }
                            return true;
                        }
                    </script>
                    <div class="panel panel-transparent">
                        <div class="panel-heading">
                            <span class="panel-title">个性签名</span>
                        </div>
                        <div class="panel-body">
                            {% if person.Motto %}{{ person.Motto }}{% else %}这个人很懒，还没有签名{% endif %}

                        </div>
                    </div>

                    <div class="panel panel-transparent">
                        <div class="panel-heading">
                            <span class="panel-title">基本信息</span>
                        </div>
                        <div class="list-group">
                            <a class="list-group-item"><strong>性别</strong> &nbsp;{{ person.Gender }}</a>
                            <a class="list-group-item"><strong>年龄</strong>&nbsp;{{ person.Age }}</a>
                            <a class="list-group-item"><strong>邮箱地址</strong> &nbsp;{{ person.Email }}</a>
                        </div>
                    </div>

                    <div class="panel panel-transparent profile-skills">
                        <div class="panel-heading">
                            <span class="panel-title">Skills</span>
                        </div>
                        <div class="panel-body">
                            <span class="label label-primary">数据结构</span>
                            <span class="label label-primary">算法设计</span>
                            <span class="label label-primary">数据库</span>
                            <span class="label label-primary">HTML</span>
                            <span class="label label-primary">CSS</span>
                        </div>
                    </div>

                    <!--
                        <div class="panel panel-transparent">
                            <div class="panel-heading">
                                <span class="panel-title">Social</span>
                            </div>
                            <div class="list-group">
                                <a href="#" class="list-group-item"><i class="profile-list-icon fa fa-twitter" style="color: #4ab6d5"></i> @dsteiner</a>
                                <a href="#" class="list-group-item"><i class="profile-list-icon fa fa-facebook-square" style="color: #1a7ab9"></i> Denise Steiner</a>
                                <a href="#" class="list-group-item"><i class="profile-list-icon fa fa-envelope" style="color: #888"></i> dsteiner@example.com</a>
                            </div>
                        </div>
        -->
                </div>
                <div class="right-col">

                    <hr class="profile-content-hr no-grid-gutter-h">

                    <div class="profile-content">

                        <ul id="profile-tabs" class="nav nav-tabs">
                            <li class="active">
                                <a href="#profile-tabs-board" data-toggle="tab">我的主页</a>
                            </li>
                            <li>
                                <a href="#profile-tabs-activity" data-toggle="tab">我的错题</a>
                            </li>
                            <li>
                                <a href="#profile-tabs-activity-stu" data-toggle="tab">我的班级</a>
                            </li>
                        </ul>

                        <div class="tab-content tab-content-bordered panel-padding">
                            <div class="widget-article-comments tab-pane panel no-padding no-border fade in active"
                                 id="profile-tabs-board">
                                <script>
                                    init.push(function () {
                                        // Doughnut Chart Data
                                         var doughnutChartData1 = [{
                                            label: "填空题正确数", data: {% if completionRight %} {{ completionRight }} {% else %} 0 {% endif %}
                                        },{
                                            label: "填空题错误数", data: {% if completionWrong %} {{ completionWrong }} {% else %} 1 {% endif %}
                                        }];
                                        var doughnutChartData2 = [{
                                            label: "简答题正确数", data: {% if shortAnswerRight %} {{ shortAnswerRight }} {% else %} 0 {% endif %}
                                        },{
                                            label: "简答题错误数", data: {% if shortAnswerWrong %} {{ shortAnswerWrong }} {% else %} 1 {% endif %}
                                        }];

                                        // Init Chart
                                        $('#jq-flot-pie').pixelPlot(doughnutChartData1, {
                                            series: {
                                                pie: {
                                                    show: true,
                                                    radius: 1,
                                                    innerRadius: 0.5,
                                                    label: {
                                                        show: true,
                                                        radius: 3 / 4,
                                                        formatter: function (label, series) {
                                                            return '<div style="font-size:14px;text-align:center;padding:2px;color:white;">' + Math.round(series.percent) + '%</div>';
                                                        },
                                                        background: {opacity: 0}
                                                    }
                                                }
                                            }
                                        }, {
                                            height: 205
                                        });
                                        $('#jq-flot-pie2').pixelPlot(doughnutChartData2, {
                                            series: {
                                                pie: {
                                                    show: true,
                                                    radius: 1,
                                                    innerRadius: 0.5,
                                                    label: {
                                                        show: true,
                                                        radius: 3 / 4,
                                                        formatter: function (label, series) {
                                                            return '<div style="font-size:14px;text-align:center;padding:2px;color:white;">' + Math.round(series.percent) + '%</div>';
                                                        },
                                                        background: {opacity: 0}
                                                    }
                                                }
                                            }
                                        }, {
                                            height: 205
                                        });
                                    });
                                </script>
                                <!-- / Javascript -->
                                <div class="panel">
                                    <div class="panel-heading">
                                        <span class="panel-title">我的错误题目分布</span>
                                    </div>
                                    <div class="panel-body">
                                        <div class="note note-info">根据错题分布掌握弱点<a
                                                href="/completion/stu_completion_answer/">&nbsp;&nbsp;^-^立即去练习</a>
                                        </div>

                                        <div class="graph-container col-md-6">
                                            <div id="jq-flot-pie"></div>
                                            <div class="text-center" style="margin-top: 15px;"> 填空</div>
                                        </div>
                                        <div class="graph-container col-md-6">
                                            <div id="jq-flot-pie2"></div>
                                            <div class="text-center" style="margin-top: 15px;"> 简答</div>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- / .tab-pane -->
                            <div class="tab-pane fade" id="profile-tabs-activity">
                                <div class="table-success">
                                    <div class="table-header">
                                        <div class="table-caption">
                                            我的错题
                                        </div>
                                    </div>
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>题库名</th>

                                            <th>正确率</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>填空</td>

                                            <td>{% if not comRate %}0{% else %}{{ comRate }}{% endif %}%</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>简答</td>
                                            <td>{% if not shortRate %}0{% else %}{{ shortRate }}{% endif %}%</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <div class="table-footer">
                                        <a href="/completion/show_completion_homepage/">去做题</a>
                                    </div>
                                </div>
                            </div> <!-- / .tab-pane -->
                            <div class="tab-pane fade" id="profile-tabs-activity-stu">

                                <!-- Info -->
                                <div class="panel-group panel-group-info" id="accordion-info-example">
                                    <div class="panel">
                                        <div class="panel-heading">
                                            <a class="accordion-toggle" data-toggle="collapse"
                                               data-parent="#accordion-info-example"
                                               href="#collapseOne-info">
                                                班级： {{ Class.tch_account }}
                                            </a>
                                        </div> <!-- / .panel-heading -->
                                        <div id="collapseOne-info" class="panel-collapse in">
                                            <div class="panel-body">
                                                <table class="table">
                                                    <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>姓名</th>
                                                        <th>学号</th>
                                                        <th>正确率</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>我的信息</td>
                                                        <td>{{ person.Name }}</td>
                                                        <td>{{ person.Account}}</td>
                                                        <td>{{ totalRate }}%</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div> <!-- / .panel-body -->
                                        </div> <!-- / .collapse -->
                                    </div> <!-- / .panel -->
                                </div> <!-- / .panel-body -->
                                <!-- </div>/ .collapse -->
                                <!-- / Info -->

                                <a data-target="#myModal1" data-toggle="modal" id="addClass" class="btn btn-pa-purple "><i
                                        class="fa fa-location-arrow"></i>&nbsp;&nbsp;加入班级</a>&nbsp;&nbsp;


                            </div><!-- /.modal -->
                        </div>
                        <script>
                            $('#sub2').click(function () {
                                var Data = $("#classinfo").serialize();
                                $.ajax({
                                    url: '/service/classadd/',
                                    type: 'POST',
                                    data: Data,
                                    success: function (response) {
                                        if (response['status'] == 200) {
                                            alert("创建成功");
                                            location.href = '/service/myhome/'
                                        } else if (response['status'] == 201) {
                                            alert("您已有课程");
                                            location.href = '/service/myhome/'
                                        } else {
                                            alert("创建失败");
                                        }
                                    }
                                })
                            })
                        </script>

                    </div>     <!-- </div>/ .collapse -->

                </div> <!-- / .tab-content -->
            </div>
        </div>
    </div>


    <!-- 班级模块 -->


    </form>
    </div><!-- /.modal-content -->
    </div><!-- /.modal -->
    </div>
    <script>
        $('#sub1').click(function () {
            var Data = $("#classinfo").serialize();
            $.ajax({
                url: '/service/classadd/',
                type: 'POST',
                data: Data,
                success: function (response) {
                    if (response['status'] == 200) {
                        alert("创建成功");
                        location.href = '/service/myhome/'
                    } else if (response['status'] == 201) {
                        alert("您已有课程");
                        location.href = '/service/myhome/'
                    } else {
                        alert("创建失败");
                    }
                }
            })
        })
    </script>

    </div>     <!-- </div>/ .collapse -->
    <!-- / Info -->

    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        加入班级
                    </h4>
                </div>
                <form id="classinfo" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="panel-body">
                        <div class="row form-group">
                            <label class="col-sm-3 control-label"
                                   style="font-size:19px;font-weight:normal;padding-left: 50px;padding-top: 8px;">班级号:</label>
                            <div class="col-sm-8">
                                <input type="text" name="tch_account" id="tch_account"
                                       class="form-control input-lg" placeholder="请输入你想加入的班级号">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="classJoin">加入</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script>
        $('#classJoin').click(function () {
            let Data = $("#classinfo").serialize();
            alert('正在加入班级');
            $.ajax({
                url: '/service/classJoin/',
                type: 'POST',
                data: Data,
                success: function (response) {
                    if (response['status'] == 200) {
                        alert("加入成功");
                        location.href = '/service/myhome/';
                    } else if (response['status'] == 201) {
                        alert("您已有班级");
                        location.href = '/service/myhome/';
                    }else if(response['status'] == 500){
                        alert("未找到此班级");
                    }
                    else {
                        alert("加入失败");
                    }
                }
            })
        })
    </script>
    <div id="main-menu-bg"></div>
    <script>
        $(function () {
            console.log("无班级");
            if ("{{ Class.className }}" == "") {

                $("#accordion-info-example").hide();
                $("#addClass").before('\t\t\t\t\t<div class="alert alert-page alert-danger alert-dark">\n' +
                    '\t\t\t\t\t\t<button type="button" class="close" data-dismiss="alert">×</button>\n' +
                    '\t\t\t\t\t\t<strong>您还未加入班级!</strong> 点击下方按钮立即加入班级\n' +
                    '\t\t\t\t\t</div> <!-- / .alert -->');

            }

        })

    </script>
    <script type="text/javascript">
        init.push(function () {
            $('#profile-tabs').tabdrop();

            $("#leave-comment-form").expandingInput({
                target: 'textarea',
                hidden_content: '> div',
                placeholder: 'Write message',
                onAfterExpand: function () {
                    $('#leave-comment-form textarea').attr('rows', '3').autosize();
                }
            });
        })
        window.LanderApp.start(init);
    </script>
{% endblock content %}